<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>在线预约</title>
<link rel="stylesheet" href="/carworld_weixin/css/ui.css">
<link href="/carworld_weixin/css/animate.min.css" rel="stylesheet" />
<link href="/carworld_weixin/css/bootstrap.min.css" rel="stylesheet" />
<link href="/carworld_weixin/css/bootstrap-select.min.css" rel="stylesheet" />

<script src="/carworld_weixin/js/jquery-3.3.1.min.js"></script>
</head>
<body>
	<div class="view-container top-tab">
		<div class="Top-location">
			<div class="nav-tabbar nav-tabbar-tab nav-orange-tab">
				<a class="tab-button active" href="">在线预约</a>
			</div>
		</div>

		<!-- 内容 begin-->
		<div>

			<form id="form" onsubmit="return false;" action="#" class="form-horizontal">
				<div class="list">
					<div class="item">
						<div class="item-content">
							<label class="name">您的称呼:</label>
							<input id="userName" class="form-control" type="text" name="userReserve.user_name" placeholder="请输您的姓名" required="required" data-error="请输入您的名字">
						</div>
					</div>
					<div class="item">
						<div class="item-content">
							<label class="name">联系方式:</label>
							<input id="userMobile" class="form-control" type="number" name="userReserve.user_mobile" maxlength="11"  placeholder="请输入您的手机号码" required="required" data-error="请输入您的手机号码">
						</div>
					</div>

					<div class="item">
						<div class="item-content">
							<label class="name">预约门店</label>
							<span>茉德精品火锅</span>
						</div>
					</div>


					<div class="item">
						<div class="item-content">
							<label class="name">预约内容:</label>
							<input id="reserveContent" class="form-control" type="text" name="userReserve.reserve_content" required="required" data-error="请输入预约的服务内容,非必填项">
						</div>
					</div>


					<div class="item">
						<div class="item-content">
							<label class="name">预约时间:</label>
							<input id="reserveTime" class="form-control" id="comeTime" type="datetime-local" name="userReserve.reserve_time" required="required" data-error="请选择预约到店时间">
						</div>
					</div>
					<div class="item">
						<div class="item-content">
							<label class="name">来店人数:</label>
							<input id="reserveSize" class="form-control" type="text" name="userReserve.reserve_size" placeholder="请输入您的来店人数" required="required" data-error="请输入您的来店人数">
						</div>
					</div>
					<div class="item">
						<div class="item-content">
							<label class="name">预约备注:</label>
							<textarea id="reserveRemark" class="form-control" rows="3" name="userReserve.reserve_remark" required="required" placeholder="请输入您的备注信息,有baby椅子需求等等填写"></textarea>
						</div>
					</div>

				</div>
				<div class="devider t-line"></div>

				<div class="form-button t-line">
					<input class="form-submit btn-orange" type="button" value="提交" onclick="reserve()">
				</div>
			</form>
		</div>
		<!-- 内容 End-->

	</div>
	<script>
		function reserve() {
			var userName = $('#userName').val();
			var userMobile = $('#userMobile').val();
			var shopId = "a6134faf9a844fe0ae006c7bd1d9a6d5";
			var shopName = "茉德精品火锅";
			var reserveContent = $('#reserveContent').val();
			var reserveRemark = $('#reserveRemark').val();
			var reserveTime = $('#reserveTime').val();
            var reserveSize= $('#reserveSize').val();
            console.log(reserveTime);

			if (userName == '' || userMobile == '' || shopId == '' || reserveTime == '' || reserveSize == '') {
				alert('亲，请填写完整的预约信息哦~');
				return;
			}
			var selectTime = Date.parse(new Date(reserveTime.replace("T", " "))); 
			var timestamp = (new Date()).getTime();
			if (selectTime < timestamp){
				alert('请预约正常的时间~');
				return ;
			}

			$.ajax({
				type : 'get',
				url : '/carworld_weixin/reserve/saveReservation',
				data : {
					userName : encodeURIComponent(userName),
					userMobile : userMobile,
					shopId : shopId,
					shopName : encodeURIComponent(shopName),
					reserveContent : encodeURIComponent(reserveContent),
					reserveRemark : encodeURIComponent(reserveRemark),
                    reserveSize:reserveSize,
                    reserveTime : reserveTime
				},
				dataType : 'text',
				contentType : 'application/json',
				success : function(data) {
					alert(data);
					window.location = href = "/carworld_weixin/"
				},
				error : function(jqXHR, textStatus, errorThrown) {
					alert("预约出错了，请再试一次~");
				}

			}); 
		};
	</script>
</body>
</html>